<template>
  <div>
    <el-menu :default-active="active" mode="horizontal" background-color="#c4565699" text-color="#fff"
      active-text-color="#D27575" height="30px" router>
      <img style="width: 50px;
        height: 50px;
        border-radius: 32px;
        margin: 4px 10px;
        background-color: #ffffff;" src="@/assets/picture1.jpg">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/flowerKnowledge">鲜花百科</el-menu-item>
      <el-menu-item index="/Item">全部商品</el-menu-item>
      <el-menu-item index="/Article">文章推送</el-menu-item>
      <el-menu-item index="/Cart">购物车</el-menu-item>
      <el-button round @click="isLogged ? logout() : login()" style="background-color: #fff;
        color: #bb7676;
        margin: 1% 0px 0px 40%;
        cursor: pointer;
        ">{{ isLogged ? '退出登录' : '登录' }}</el-button>
      <el-button round style="background-color: #fff;
        color: #bb7676;
        margin: 1%;
        cursor: pointer;
        ">个人中心</el-button>
      <el-button round @click="gotoOrder" style="background-color: #fff;
        color: #bb7676;
        margin: 1% ;
        cursor: pointer;
        ">我的订单</el-button>
    </el-menu>
  </div>
</template>

<script>
import { flowerUserLogout } from '@/api/auth'
export default {
  data() {
    return {
      active: "/",
      isLogged:false,
    }
  },
  methods:{
    logout(){
      //发送退出登录给后端
    flowerUserLogout()
      .then((response)=>{
        console.log(response)
        window.localStorage.removeItem('token')
        //刷新本业
        this.$router.go(0)
      })
    },
    login(){
      this.$router.push({name:'login'})
    },
    gotoOrder(){
      this.$router.push({name:'Order'})
    }
  },
  mounted: function () {
    if (window.localStorage.getItem("token") === null) {
      this.isLogged = false
    }
    else {
      this.isLogged = true
    }
  }

};
</script>

<style></style>